<template>
    <div>
        <page-header title="文章编辑" />
        <page-main>
            <el-form
                ref="editFormRef"
                :label-position="labelPosition"
                :rules="editFormRules"
                label-width="100px"
                :model="editArticleForm"
            >
                <el-form-item label="文章标题：" prop="title">
                    <el-input
                        v-model="editArticleForm.title"
                        placeholder="请输入文章标题"
                    />
                </el-form-item>
                <el-form-item label="文章作者：" prop="name">
                    <el-input
                        v-model="editArticleForm.name"
                        disabled
                        placeholder="请输入文章作者"
                    />
                </el-form-item>
                <el-form-item label="文章封面：">
                    <image-upload
                        v-model:url="image"
                        action="#"
                        name="image"
                        :width="250"
                        :height="150"
                        :data="{ token: 'TKD628431923530324' }"
                        @on-success="handleSuccess"
                    />
                </el-form-item>
                <el-form-item label="文章类别：" prop="category">
                    <el-select
                        v-model="editArticleForm.category"
                        clearable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="文章内容：" prop="content">
                    <editor v-model="editArticleForm.content" />
                </el-form-item>
            </el-form>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" @click="editArticleFormSubmit(true)">
                发布
            </el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
        </fixed-action-bar>
    </div>
</template>

<script setup name="articleMangerEdit">
import { update } from '@/api/articles'
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
// 表单文本的对齐方式
const labelPosition = 'left'
// 编辑表单内容
const editArticleForm = ref({})
// 文章封面
const image = ref('')
// 文章类别
const options = ref([
    {
        value: '分类1',
        label: '黄金糕'
    },
    {
        value: '分类2',
        label: '双皮奶'
    },
    {
        value: '分类3',
        label: '蚵仔煎'
    },
    {
        value: '分类4',
        label: '龙须面'
    },
    {
        value: '分类5',
        label: '北京烤鸭'
    }
])
const editFormRules = ref({
    title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    name: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    category: [
        { required: true, message: '请选择文章分类', trigger: 'change' }
    ],
    content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
})

editArticleForm.value = route.query

/**
 * @description: 发表文章或存为草稿
 * @param {*}
 * @return {*}
 * @author: Yu
 */
function editArticleFormSubmit(flag) {
    proxy.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        editArticleForm.value.status = flag
        editArticleForm.value.datatime = proxy.$dayjs().format(
            'YYYY-MM-DD HH:mm:ss'
        )
        const res = await update(editArticleForm.value)
        ElMessage.success(res.message)
        router.push({ name: 'articleMangerList' })
    })
}

/**
 * @description: 文章封面上传
 * @param {*} res
 * @return {*}
 * @author: Yu
 */
function handleSuccess(res) {
    if (res.error == '') {
        image.value = res.data.path
    } else {
        ElMessage.warning(res.error)
    }
}
</script>
